$(function () {
    //定义一个全局变量 将来用于操作get参数
    let q = {
        pagenum: 1, //是   int    页码值
        pagesize: 2, //是   int    每页显示多少条数据
        cate_id: '', //否   string 文章分类的 Id
        state: '', //否   string 文章的状态， 可选值有： 已发布、 草稿
    }
    //需求1：渲染文章列表数据 将来要用 所以封装成函数
    let layer = layui.layer
    initArticleList()

    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            // get参数，且为查询参数用 params
            params: q
        }).then((res) => {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 循环遍历，赋值
            let arr = [];
            res.data.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td><a id="tan" data-id="${ele.Id}">${ ele.title}</a></td>
                        <td>${ ele.cate_name}</td>
                        <td>${ dateFormat(ele.pub_date)}</td>
                        <td>${ ele.state}</td>
                        <td>
                            <a href="/article/article_edit.html?id=${ele.Id}" class="layui-btn  layui-btn-xs">编辑</a>
                            <button data-id="${ele.Id}" class="del-btn layui-btn  layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `);
            })
            // 赋值渲染
            $("tbody").empty().html(arr.join(''));
            // 渲染完毕文章列表后，渲染分页
            renderPage(res.data.total);
        });
    }
    // 需求2: 初始化渲染文章分类列表;
    let form = layui.form;
    initArtCateList();
    // 封装初始化文章分类列表渲染函数
    function initArtCateList() {
        // 发送ajax
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then((res) => {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 定义数组，直接渲染
            let arr = ['<option value="">请选择文章类别</option>'];
            res.data.data.forEach(ele => {
                if (ele.Id > 0) {
                    arr.push(`<option value="${ele.Id}">${ele.name}</option>`);
                }
            });
            // 赋值
            let str = arr.join('');
            $("[name=cate_id]").empty().html(str);
            // 重新渲染页面中的所有 form 中的 所有表单( select / checkbox / radio )
            form.render();
        });
    }
    //需求3 筛选
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        //cate_id和state的值 修改根据form表单里面的值修改
        q.cate_id = $('[name=cate_id]').val()
        q.state = $('[name=state]').val()
        initArticleList()
    })
    //重置
    $("#searchForm").on('reset', function (e) {
        // 阻止默认提交
        e.preventDefault();
        $('[name="cate_id"]').val('');
        $('[name="state"]').val('');
        // 修改参数
        q.cate_id = ''
        q.state = ''
        // 发送ajax重新渲染文章列表
        initArticleList();
    })
    // 需求4: 分页;
    function renderPage(total) {
        let laypage = layui.laypage;
        laypage.render({
            elem: 'pageBox', // 注意，这里的 test1 是 ID，不用加 # 号
            count: total, // 数据总数，从服务端得到
            limit: q.pagesize, // 每页显示的条数
            curr: q.pagenum, // curr就是当前页 
            // layout 元素配置
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            // 每页条数的选择项
            limits: [2, 5, 10, 15, 20],
            // 页码切换后的回调函数！
            jump: function (obj, first) {
                // // obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数
                // 首次不执行
                if (!first) {
                    // 改变参数，重新发送ajax，
                    q.pagenum = obj.curr; // 修改当前页
                    // 每页显示多少改变，要同步给参数
                    q.pagesize = obj.limit;
                    // 渲染文章列表！
                    initArticleList();
                }
            }
        });
    }
    //需求5：删除-事件委托
    $('tbody').on('click', '.del-btn', function () {
        let id = $(this).attr('data-id')
        layer.confirm('确定删除？', {
            icon: 3,
            title: '提示'
        }, function (index) {
            axios({
                url: '/my/article/delete/' + id,
            }).then(({
                data: res
            }) => {
                console.log(res);
                if (res.status != 0) {
                    return layer.msg(res.message)
                }
                layer.msg('删除成功')
                //删除ajax成功后 当我们再次发起的时候，如果页面中还有一条数据 当前页--  当前页大于等于2 有资格--
                // if($('.del-btn').length==1&&q.pagenum>=2) q.pagenum--
                $('.del-btn').length == 1 && q.pagenum >= 2 && q.pagenum--
                //刷新页面
                initArticleList()
            })
            layer.close(index);
        });
    })
    //需求6 弹出层显示文章内容  委托
    $('tbody').on('click', '#tan', function () {
        let id = $(this).attr('data-id')
        //发送ajax
        axios({
            method: 'get',
            url: '/my/article/' + id
        }).then(({
            data: res
        }) => {
            console.log(res);
            layer.open({
                type: 1,
                title: '预览文章',
                area: ['1500px', '740px'],
                content: `
                    <h2>${res.data.title}</h2>
                    <div class="tan">
                    <span>作者:&nbsp${res.data.author_id}</span>
                    <span>发布时间:&nbsp${res.data.pub_date}</span>
                    <span>所属分类:&nbsp${res.data.cate_id}</span>
                    <span>状态:&nbsp${res.data.state}</span>
                    <hr>
                    <img src="${'http://api-breakingnews-web.itheima.net'+ res.data.cover_img}">
                    <p>${res.data.content}</p>
                    </div>
                `
            });
        })
    })

})